<template>
  <div class="WeatherSearch">
    <header class="bg-weather-primary">
      <nav class="container">
        <a href="/weather">
          <div class="logo-item text-white">
            <i class="iconfont icon-taiyang weather-logo"></i>
            <span>新中地天气</span>
          </div>
        </a>
        <div class="real-time">
          <h1>{{ city }}</h1>
          <span>实时天气：{{ realWeather }}{{ realTemp }}&#8451;</span>
          <span>{{ realWind }}风{{ realPower }}级</span>
        </div>
        <div class="tip">
          <i class="iconfont icon-31tishi tip-info" @click="showDialog"></i>
          <i class="iconfont icon-tianjia add-city" @click="handleClick"></i>
          <div class="modal-mask" v-if="dialogVisible">
            <h5>关于:</h5>
            <p>这个应用可以用来追踪你选择城市的当前天气</p>
            <h5>如何使用:</h5>
            <p>1.点击搜索框输入你希望追踪的城市</p>
            <p>2.在搜索结果中选中一个城市，你将获取当地最新的天气</p>
            <p>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</p>
            <h5>移除城市:</h5>
            <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
            <button class="close-tip" @click="dialogVisible = !dialogVisible">
              关闭
            </button>
          </div>
        </div>
      </nav>
    </header>
    <main class="container">
      <!-- 输入城市查询 -->
      <city-search :iPWeather="this.weatherinfo" ref="child"></city-search>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import CitySearch from "./CitySearch";
export default {
  name: "WeatherSearch",
  components: {
    CitySearch,
  },

  data() {
    return {
      city: "",
      adcode: "",
      cityAdcode: "",
      weatherinfo: [],
      realWeather: "",
      realTemp: "",
      realWind: "",
      realPower: "",
      dialogVisible: false,
    };
  },
  mounted() {
    this.getWeather();
  },
  methods: {
    async getWeather() {
      try {
        // 查询ip所在城市
        const IP = await axios.get(
          "https://restapi.amap.com/v3/ip?parameters&key=ce4e514377b2ec6820b7e123de8b8008"
        );
        this.adcode = IP.data.adcode;
        this.city = IP.data.city;
        // 查询当前ip的实时天气
        const realData = await axios.get(
          `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.adcode}&key=ce4e514377b2ec6820b7e123de8b8008`
        );
        this.realWeather = realData.data.lives[0].weather;
        this.realTemp = realData.data.lives[0].temperature;
        this.realWind = realData.data.lives[0].winddirection;
        this.realPower = realData.data.lives[0].windpower;
        // 查询
        const weatherData = await axios.get(
          `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.adcode}&key=ce4e514377b2ec6820b7e123de8b8008&extensions=all`
        );
        this.weatherinfo = weatherData.data.forecasts[0].casts;
      } catch (error) {
        console.error(error);
      }
    },
    handleClick() {
      console.log(this.$refs.child.InterestCities);
      const city = this.$refs.child.InterestCities;
      // 获取现有的对象数组（如果存在）
      let objArr = JSON.parse(localStorage.getItem("myCity")) || [];
      // 将新对象添加到数组中
      objArr.push(city);
      // 将更新后的对象数组保存回localStorage中
      localStorage.setItem("myCity", JSON.stringify(objArr));
      location.reload();
    },
    showDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.WeatherSearch {
  width: 100%;
  background-color: #00668a;
}
.bg-weather-primary {
  width: 100%;
  height: 80px;
  background-color: var(--tw-bg-opacity);
  box-shadow: var(--tw-shadow);
}
nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  color: var(--text-white);
}
.logo-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
}
.weather-logo {
  font-size: 2rem;
}
.real-time {
  display: flex;
  gap: 1rem;
}
.tip {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  font-size: 1.5rem;
}
.tip-info {
  font-size: 1.5rem;
}
.modal-mask {
  position: fixed;
  width: 350px;
  height: 300px;
  top: 100px;
  left: 500px;
  padding: 1rem;
  background-color: #fff;
  color: black;
  transition: all 0.3s;
}
.modal-mask h5 {
  margin-top: 1rem;
  font-size: 1rem;
}
.modal-mask p {
  font-size: 0.75rem;
  margin-top: 0.5rem;
}
.close-tip {
  width: 80px;
  height: 40px;
  margin-top: 25px;
  border: none;
  background-color: #00668a;
  color: #fff;
}
.add-city {
  font-size: 1.5rem;
}
.container {
  width: 75%;
  margin-right: auto;
  margin-left: auto;
}
</style>